<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="pursue.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <title>表白墙</title>
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <div id="user"></div>

      <div class="title">主页</div>

      <div class="space"></div>

      <a href="login.html" onclick="remove()">退出登录状态</a>
    </div>
    <div class="container">
      <div class="container-left">
        <div class="card">
          <form action="#">
            <h1>表白</h1>
            <div class="row">
              谁：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                type="text"
                id="c1"
              />
            </div>
            <div class="row">想对谁：<input type="text" id="c2" /></div>
            <div class="row">
              说：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
                type="text"
                id="c3"
              />
            </div>
            <div class="print">
              <div class="s">
                <input type="button" value="发送" id="go" onclick="send()" />
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="container-right">
        <div class="article">
          <h1 style="font-size: 50px">墙</h1>
          <div id="a"></div>
        </div>
      </div>
    </div>
    <script>
      function waterFall(boxes) {
        // 将a下的全部box取出来
        var oParent = jQuery("#a");
        // 获得类名为box的数组

        // 计算显示的列数（页面的宽/box的宽）
        var oBoxWeight = boxes[0].outerWidth(); // console.log(oBoxWeight);
        //333 + 内边距 10 * 2 + 边框 1 * 2 + （填充）15 == 370
        var cols = Math.floor(jQuery("#a").width() / oBoxWeight);
        // 设置a的宽度
        oParent.css("width", cols * oBoxWeight + "px");
        oParent.css("margin", "0 auto");

        // 存放第该列（位置正确摆放的多个div高度）的高度的数组
        // 第一次，则是第一行每个div的高度
        var hArr = [];
        for (var i = 0; i < boxes.length; i++) {
          if (i < cols) {
            hArr.push(boxes[i].outerHeight());
          } else {
            var minH = Math.min.apply(null, hArr); //top
            var index = getMinhIndex(hArr, minH);
            boxes[i].attr(
              "style",
              "position: absolute; top: " +
                minH +
                "px; left: " +
                oBoxWeight * index +
                "px;"
            );
            //处理盒子重叠
            hArr[index] += boxes[i].outerHeight();
          }
        }
        // left -> 左边三个div的宽，top-> 最小高
      }
      function getMinhIndex(arr, val) {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            return i;
          }
        }
      }
      function remove() {
        jQuery.ajax({
          type: "get",
          url: "remove",
        });
      }

      jQuery.ajax({
        type: "get",
        url: "login",
        success: function (body) {
          if (body == "No") {
            window.location.href = "login.html";
          } else if (body == "NoImage") {
            jQuery("#user").css(
              "background-image",
              "url(https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300)"
            );
          } else {
            alert("欢迎" + body.name);
            jQuery(".title").text(body.name);
            jQuery("#user").css(
              "background-image",
              "url(" + body.fileName + ")"
            );
          }
        },
      });

      function getLoves() {
        jQuery.ajax({
          type: "GET",
          url: "love",
          success: function (body) {
            var boxArray = [];
            //body就是数组
            for (var word of body) {
              var result =
                "<br/><h2>" +
                word.from +
                "想对" +
                word.to +
                "说“" +
                word.love +
                "”</h2>";
              var aB = jQuery("<div></div>");
              aB.attr("class", "B");
              aB.append(result);

              var aTleft = jQuery("<div></div>");
              aTleft.attr("class", "Tleft");
              aTleft.css("background-image", "url(" + word.image + ")");

              var aTright = jQuery("<div></div>");
              aTright.attr("class", "Tright");
              aTright.append(
                "<h4>" + word.username + "：</h4> <h4>" + word.date + "</h4>"
              );
              var aT = jQuery("<div></div>");
              aT.attr("class", "T");
              aT.append(aTleft);
              aT.append(aTright);
              var aPic = jQuery("<div></div>");
              aPic.attr("class", "pic");
              aPic.append(aT);
              aPic.append(aB);
              var aBox = jQuery("<div></div>");
              aBox.attr("class", "box");
              aPic.appendTo(aBox);
              aBox.appendTo(jQuery("#a"));
              boxArray.push(aBox);
            }
            waterFall(boxArray);
          },
        });
      }

      getLoves();
      function refresh() {
        jQuery("#a").empty();
        getLoves();
      }
      setInterval(refresh, 5000);
      function send() {
        var text1 = jQuery("#c1");
        var text2 = jQuery("#c2");
        var text3 = jQuery("#c3");
        if (text1.val().trim() == "") {
          alert("请输入是谁！");
          text1.focus();
          return;
        }
        if (text2.val().trim() == "") {
          alert("请输入想对谁说！");
          text2.focus();
          return;
        }
        if (text3.val().trim() == "") {
          alert("请输入想说什么！");
          text3.focus();
          return;
        }
        var body = {
          from: text1.val(),
          to: text2.val(),
          love: text3.val(),
        };
        jQuery.ajax({
          type: "POST",
          url: "love",
          contentType: "application/json; charset=utf8",
          data: JSON.stringify(body),
          success: function (body) {
            refresh();
          },
          //json的一些方法就在jquery里了
        });
        text1.val("");
        text2.val("");
        text3.val("");
      }
    </script>
  </body>
</html>
